<template>
    <div id="alice">
      <el-row>
        <el-col :span="12"><div id="title_01"><i class="el-icon-s-flag"></i> Abandon健康管理后台</div></el-col>
        <el-col :span="7">
          <el-tooltip class="item" effect="dark" content="点击换头像" placement="left">
            <div id="head_img" @click="change_head_img"><el-avatar :src="image"></el-avatar></div>
          </el-tooltip>
        </el-col>
        <el-col :span="2"><div id="user_name">{{online.adminName}}</div></el-col>
        <el-col :span="2">    <el-dropdown>
      <span class="el-dropdown-link">
        退出<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
          <el-dropdown-menu slot="dropdown">
            <el-link type="primary" @click="out">正常退出</el-link>
            <br>
            <el-link type="success" @click="bugOut">退出出BUG</el-link>
            <br>
            <el-link type="warning" @click="repOut">重复同一退出</el-link>
          </el-dropdown-menu>
        </el-dropdown></el-col>
        <div style="clear: both"></div>
      </el-row>
      <el-dialog title="换个头像" :visible.sync="dialogVisible">
        <el-upload
          class="upload-demo"
          action="http://oss-jing.oss-cn-chengdu.aliyuncs.com"
          :show-file-list="true"
          :data="dataObj"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          multiple
          :limit="3">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-dialog>
    </div>
</template>
<script>
    export default {
        name: "Crown",
      inject:["reload"],
      created() {
        let obj = localStorage.getItem("admin")
        this.online = JSON.parse(obj)
        this.image = this.online.img
      },
      data(){
          return {
            online: {},
            image: '',
            dialogVisible: false,
            imageUrl: '',
            dataObj: {
              policy: '',
              signature: '',
              key: '',
              OSSAccessKeyId: '',
              dir: '',
              host: ''
            },
            time:'',
            url:'',
          }
      },
      methods:{
        change_head_img(){
          this.dialogVisible = true
          this.axios.get("micro-sys-server/oss/getPolicy")
            .then(response =>{
              // console.log(response.data)
              this.time = ""+Date.now()
              this.dataObj.policy = response.data.policy
              this.dataObj.signature = response.data.signature
              this.dataObj.OSSAccessKeyId = response.data.accessid
              this.dataObj.key = response.data.dir + this.time + '_${filename}'
              this.dataObj.dir = response.data.dir
              this.dataObj.host = response.data.host
              console.log("ready")
            })
          //20210114/1212121212chef.jpg
        },
        handleAvatarSuccess() {
          console.log(this.url)
          this.image = this.url
          this.online.img = this.url
          localStorage.setItem("admin",JSON.stringify(this.online))
          this.reload()
          this.dialogVisible = false
          alert("success!")
        },
        beforeAvatarUpload(file) {
          // const isJPG = file.type === 'image/jpeg';
          // const isLt2M = file.size / 1024 / 1024 < 2;
          //
          // if (!isJPG) {
          //     this.$message.error('上传头像图片只能是 JPG 格式!');
          // }
          // if (!isLt2M) {
          //     this.$message.error('上传头像图片大小不能超过 2MB!');
          // }
          // return isJPG && isLt2M;
          this.url = "https://oss-jing.oss-cn-chengdu.aliyuncs.com/"+this.dataObj.dir+this.time+"_"+file.name
          let data = {
            id: this.online.id,
            img: this.url
          }
          this.axios.post("micro-sys-server/sys/changeHead",data,).then(res => {
            console.log(res)
          });
        },
        out(){
          let data = {
            id: this.online.id,
            txNo: ""
          }
          this.axios.post("micro-sys-server/rocket/out",this.$qs.stringify(data)).then(res => {
            if(res.data === "退出成功"){
                localStorage.clear();
              window.location.href = "http://localhost/"
            }
          });
        },
        bugOut(){
          let data = {
            id: this.online.id,
            txNo: 'xxx'
          }
          this.axios.post("micro-sys-server/rocket/out",this.$qs.stringify(data))
        },
        repOut(){
          let data = {
            id: this.online.id,
            txNo: '111'
          }
          this.axios.post("micro-sys-server/rocket/out",this.$qs.stringify(data))
        }
      }
    }

</script>

<style scoped>

  div{
    margin-bottom: 10px;
    /*border: black 1px solid;*/
  }

  #alice{
    line-height:60px;
    height:60px;
    background-color: #F0F2F5;
  }
  #head_img{
    float: right;
    padding-top: 10px;
    box-sizing: border-box;
  }
  #user_name{
    float: left;
    font-size: medium;
    font-weight:bold;
    margin-left: 20px;
  }

  #title_01{
    font-size: medium;
    font-weight:bold;
    color: #409EFF;
  }
  #title_02{
    font-size: larger;
    font-weight:bold;
    /*background-color: #409EFF;*/
  }
  .avatar-uploader .el-upload {
    border: 1px dashed black;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 78px;
    height: 78px;
    display: block;
  }
</style>
